<template>
  <div class="div1">
    <div :id="echartsData.id" :style="{width: '100%', height: '80%',background:'rgb(8,40,65)'}" />
    <div class="tips" :style="{width: '100%', height: '20px',display:'flex'}">
      <div v-for="(item,index) in echartsData.series" :key="index" class="lable">{{ item.name }}<div class="text" :style="'color:'+color[index]">———</div></div>
    </div>
  </div>
</template>

<script>

import * as echarts from 'echarts'
export default {
  name: 'ChartLine',
  props: {
    echartsData: {
      type: Object,
      default: () => {
        return {
          id: '',
          xData: '',
          series: ''
        }
      }
    }
  },
  data() {
    return {
      color: ['yellow', 'red', 'blue', 'blueviolet', 'green', 'white'],
      series: ''
    }
  },
  watch: {
    echartsData: {
      handler: function(val, oldVal) {
        // console.log("echarddd",this.echartsData)
        this.initChart(this.echartsData.id, this.echartsData.xData, this.echartsData.series)
      },
      deep: true
    }
  },
  mounted() {
    // console.log('echar', this.echartsData)
    this.initChart(this.echartsData.id, this.echartsData.xData, this.echartsData.series)
  },
  methods: {

    initChart(id, xData, series) {
      // series.prototype.color=['yellow','red'];
      const getchart = echarts.init(document.getElementById(id))
      this.series = series
      var option = {
        tooltip: {
          trigger: 'axis',

          formatter: function(params) {
            let returnData = ''
            params.forEach(element => {
              returnData += element.seriesName + '： ' + element.data.value + '<br>时间： ' + element.data.time + '<br>'
            })
            return returnData
            // console.log(params)
          }

        },
        // legend: {
        //     data: [name],
        //     bottom:'0%'
        // },
        grid: { // 调整图表上下左右位置
          top: '10%',
          left: '3%',
          right: '8%',
          bottom: '11%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          // boundaryGap: [1,0],
          min: 0,
          max: 6,
          axisLabel: { color: 'rgb(151,171,211)', fontSize: '10' },
          axisLine: {
            lineStyle: { color: 'rgb(151,171,211)' } // x轴坐标轴颜色
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgb(151,171,211)'],
              width: 1,
              type: 'solid'
            }
          },
          // boundaryGap: false,
          // data: xData
          data: ['1', '2', '3', '4', '5']
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: 'rgb(151,171,211)', fontSize: '10' },
          axisLine: {
            lineStyle: { color: 'rgb(151,171,211)' } // y轴坐标轴颜色
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['rgb(151,171,211)'],
              width: 1,
              type: 'solid'
            }
          },
          min: function(value) {
            return Math.round(value.min * 0.9)
          },
          max: function(value) {
            return Math.round(value.max * 1.1)
          }
          // data:[20,40,60,80,100],
        },
        color: this.color,
        series: series
      }

      getchart.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        getchart.resize()
      })
    }

  }

}
</script>
<style scoped>
.div1{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 100%;
}
.tips{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.lable{
    display: flex;
    color: white;
    width: '33%';
    height: '50%';
    font-size: 10px;
}
.text{
    margin-left: 5px;
}
</style>
